
import { Tooltip } from 'antd'
import mpPanelImg from '@/assets/image/screenshot/mp-panel.png'

## 开始使用#start-using

### 第一步#step-1

在项目中安装依赖。我们提供了多种小程序平台的 SDK，请根据需要安装：

:::code-group

```bash wechat
yarn add @huolala-tech/page-spy-wechat@latest
```

```bash alipay
yarn add @huolala-tech/page-spy-alipay@latest
```

```bash uniapp
yarn add @huolala-tech/page-spy-uniapp@latest
```

```bash taro
yarn add @huolala-tech/page-spy-taro@latest
```

:::

### 第二步#step-2

将 PageSpy 服务域名填入小程序的 HTTP、WebSocket 请求白名单中。注意：除开发环境外，小程序强制要求使用 HTTPS 和 WSS 协议：

```
https://<your-pagespy-host>
wss://<your-pagespy-host>
```

### 第三步#step-3

在入口文件中引入 SDK 并实例化，可通过 [配置项]({VITE_SDK_WECHAT_REPO}) 自定义 SDK 的行为：

:::code-group

```js wechat
import PageSpy from '@huolala-tech/page-spy-wechat';

const $pageSpy = new PageSpy({
  api: "{deployPath}",
  enableSSL: {enableSSL},
})
```

```js alipay
import PageSpy from '@huolala-tech/page-spy-alipay';

const $pageSpy = new PageSpy({
  api: "{deployPath}",
  enableSSL: {enableSSL},
})
```

```js uniapp
import PageSpy from '@huolala-tech/page-spy-uniapp';

const $pageSpy = new PageSpy({
  api: "{deployPath}",
  enableSSL: {enableSSL},
})
```

```js taro
import PageSpy from '@huolala-tech/page-spy-taro';
import Taro from '@tarojs/taro';

const $pageSpy = new PageSpy({
  taro: Taro,
  api: "{deployPath}",
  enableSSL: {enableSSL},
})
```

:::

## 调试菜单#menus

调用 `$pageSpy.showPanel()` 方法可以弹出调试菜单：

<a href={mpPanelImg} target="_blank">
  <img src={mpPanelImg} style={{ maxWidth: 320 }} />
</a>

以上就是在小程序项目中接入 PageSpy 的全部流程，接入完成后点击顶部菜单 <Tooltip title="菜单默认隐藏，部署后可见" color="purple"><a href="javascript:void(0)">开始调试</a></Tooltip> 使用！
